<style lang="scss" scoped>
    @import "../../../utils/base.scss";
    .mySplit{
        height:auto;
        display: flex;
    }
    .otherSplit{
        padding: 10px;
        overflow-y: auto;
        overflow-x: hidden
    }
    .split-pane{
        padding: 10px;
    }
    .ivu-checkbox-wrapper{
        font-size: 0px;
    }
    .myPosition{
        position: relative;
        left: 1%;
    }
    .my-columns{
        height:auto;
    }
    .clearfloat{
        clear:both;
        height:0;
        font-size:1px;
        line-height:0px;
    }
    .mySplit >>>.ivu-tree-title {
        white-space: normal;
        padding-left: initial;
    }
    .myLeft{
        padding: 10px;
        border: 1px solid #dcdee2;
        width: 300px;
        padding-right: 20px;
    }
    .myRight{
        padding: 10px;
        width:85%;
        border: 1px solid #dcdee2;
    }
</style>
<template>
    <div class="mySplit" v-if="showTable">
        <!-- <Split v-model="split" min="160px" max="750"> -->
            <div class="myLeft">
                <Tree :data="treeData" :render="renderContent" @on-select-change="selectMenu"></Tree>
            </div>
            <div class="myRight">
                <div style="padding-bottom: 5px">
                    <label>字段名称</label>
                    <Input v-model="searchs.fieldName" placeholder="请输入" style="width:auto;" @on-enter="searchTables"/>
                    <label class="myPosition">数据表名</label>
                    <Input class="myPosition" v-model="searchs.tableName" placeholder="请输入" style="width:auto;" @on-enter="searchTables"/>
                    <Button class="myPosition" type="text" icon="md-refresh" @click="refreshTableData">刷新</Button>
                    <Button class="myPosition" type="primary" @click="searchTables">查询</Button>

                    <template v-if="!ifProcess">
                        <Dropdown @on-click="selectImport" class="myPosition">
                            <Button type="primary">
                                数据导入
                                <Icon type="ios-arrow-down"></Icon>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="0">新增数据</DropdownItem>
                                <DropdownItem name="1">重置数据</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <!-- <Button type="primary" id="import" @click="selectFile" class="myPosition">导入excel数据</Button> -->
                        <input type="file" id="file" style="display: none;" @change="importFile" multiple="multiple" />
                    </template>
                </div>
                <div>
                    <Table border :columns="myTableColumns" :data="tableData" :loading="tableLoading" @on-row-dblclick="selectTable" @on-sort-change="sortTable" >
                        <template slot-scope="{ row, index }" slot="selection">
                            <Checkbox v-model="tableData[index].ifCheck" @on-change="checkTable(tableData[index])">
                                <span></span>
                            </Checkbox>
                        </template>
                        <template slot-scope="{ row, index }" slot="tableNameEn">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.tableNameEn}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="tableName">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.tableName}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="dataLevel">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.dataLevel}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="domain">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.domain}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="subjectField">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.subjectField}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="dataOpenLevel">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.dataOpenLevel}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="cycleType">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.cycleType}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="keepTime">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.keepTime}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="keepUnit">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.keepUnit}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="dataScope">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.dataScope}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="oriSys">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.oriSys}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="caliber">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{row.caliber}}</span>
                            </Tooltip>
                        </template>
                        <template slot-scope="{ row, index }" slot="updateTime">
                            <Tooltip :content="ifProcess?'双击进入该表选字段':'双击进入该表查看字段'" theme="light" :transfer="true">
                                <span>{{formatDate(row.updateTime)}}</span>
                            </Tooltip>
                        </template>
                    </Table>
                </div>
                <div style="float: right;margin: 10px;">
                    <Page :current="page" :total="total" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                </div>
            </div>
       <!--  </Split> -->
    </div>

    <div class="my-columns" v-else>
        <div style="padding-bottom: 5px">
            <label>字段名称</label>
            <Input v-model="columnName" placeholder="请输入" style="width:150px;" @on-enter="findColumns"/>
            <Button type="text" icon="md-refresh" @click="getColumns(temp_table,1)">刷新</Button>
            <Button type="primary" @click="findColumns">查询</Button>
            <Button v-if="ifProcess" type="primary" @click="ok_columns">确定</Button>
            <Button type="primary" @click="return01">返回</Button>
        </div>
        <div>
          <Table border :columns="myColumns" :data="columnsData" :loading="columnsLoading" @on-select="selectColumns" @on-select-cancel="cancelColumns" @on-select-all="selectAllColumns" @on-select-all-cancel="cancelAllColumns" @on-sort-change="sortColumns">
          </Table>
        </div>
        <div style="text-align: right;padding-top: 10px;">
            <Page :current="cPage" :total="cTotal" show-total show-elevator show-sizer @on-change="changeCpage" @on-page-size-change="changeCpageSize"></Page>
        </div>
    </div>
</template>

<script>
    import Axios from 'axios'
    import ajax from "../../../ajax_util"
    import untils from "../../../utils/excel"
    import XLSX from 'xlsx'

    export default {
        components: {untils},
        data () {
            return {
                split:0.15,
                tableLoading:true,
                columnsLoading:true,
                table_columns:[
                    // {
                    //     title: ' ',
                    //     slot:"selection",
                    //     width: 60,
                    //     align: 'center',
                    //     fixed: 'left'
                    // },
                    // {
                    //     title: '序号',
                    //     type: 'index',
                    //     width: 70,
                    //     align: 'center'
                    // },
                    {
                        title: '表英文名',
                        key: 'tableNameEn',
                        slot:"tableNameEn",
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '表中文名',
                        key: 'tableName',
                        slot:"tableName",
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '层级',
                        key:'dataLevel',
                        slot:'dataLevel',
                        width:100,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '所属域',
                        key:'domain',
                        slot:'domain',
                        width:100,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '主题域',
                        key:'subjectField',
                        slot:'subjectField',
                        width:160,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '数据开放推荐级别',
                        key:'dataOpenLevel',
                        slot:'dataOpenLevel',
                        width:160,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '更新周期',
                        key:'cycleType',
                        slot:'cycleType',
                        width:110,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '保存时长',
                        key:'keepTime',
                        slot:'keepTime',
                        width:110,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '保存时长单位',
                        key:'keepUnit',
                        slot:'keepUnit',
                        width:140,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '数据范围',
                        key:'dataScope',
                        slot:'dataScope',
                        width:150,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '所属系统',
                        key:'oriSys',
                        slot:'oriSys',
                        width:150,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '业务口径',
                        key:'caliber',
                        slot:'caliber',
                        width:350,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '更新时间',
                        key:'updateTime',
                        slot:'updateTime',
                        width:150,
                    }
                ],
                columns:[
                    // {
                    //     type: 'selection',
                    //     width: 60,
                    //     align: 'center',
                    // },
                    // {
                    //     title: '序号',
                    //     type: 'index',
                    //     width: 70,
                    //     align: 'center'
                    // },
                    {
                        title: '字段属性',
                        key: 'fieldNameEn',
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '字段名称',
                        key:'fieldName',
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '数据类型',
                        key: 'fieldType',
                        width:150,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '数据样例',
                        key:'fieldEnum',
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '字段描述',
                        key:'fieldDes',
                        width:350,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: 'IT部门共享',
                        key:'departmentShare',
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '移动单位间共享',
                        key:'companyShare',
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '第三方合作共享',
                        key:'otherShare',
                        width:200,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '计算口径',
                        key:'countCaliber',
                        width:150,
                        resizable:true,
                        sortable: 'custom'
                    },
                    {
                        title: '备注',
                        key:'des',
                        width:150,
                        sortable: 'custom'
                    }
                ],
                len:'',
                treeData: [],
                tableData:[],
                columnsData:[],
                //会可能排序无搜索的所有数据(排序时使用)
                allColumns:[],
                //会可能排序有搜索的所有数据(排序时使用)
                search_columns:[],
                //无搜索无排序保存的所有原始数据
                all_normal:[],
                //有搜索保存的原始数据
                search_normal:[],
                checkList:[],
                selectData:[],
                searchs:{
                    subjectField:"所有",
                },
                subjectField:"所有",
                domain:"",
                fieldName:"",
                tableName:"",
                orderOptions:[],
                columnName:"",
                id:0,
                page:1,
                pageSize:10,
                total:0,
                temp_table:{},
                temp_select:[],
                //temp_columns:this.result_temp,
                myHeight:500,
                cPage:1,
                cPageSize:10,
                cTotal:0,
                menuName:"",
            }
        },
        created: function() {
            //this.getHeight();
        },
        mounted() {
            console.log("---------555555---",this.resultData);
            this.getData();
            // this.getMenu();
            // this.getTableData();
        },
        methods: {
            // getHeight(){
            //     if(this.ifProcess){
            //         this.myHeight = window.innerHeight - 108;
            //     }else{
            //         this.myHeight = window.innerHeight - 248;
            //     }

            //     console.log("======333=====",this.myHeight)
            //     this.$forceUpdate();
            //     this.getMenu();
            //     this.getTableData();
            // },
            getData(){
                var json = JSON.stringify(this.resultData);
                var temp = JSON.parse(json);
                console.log('getData:',temp)
                this.selectData = temp;
                this.getMenu();
                this.getTableData();
            },
            getMenu(){
                var that=this;
                var url=this.CONFIG.progress_url+'/service-list/data/nav';

                ajax.get({
                url:url,
                that:that,
                success:function(data){
                    //console.log("=========",data);
                    for(var i=0; i<data.length; i++){
                        data[i].render=(h, { root, node, data }) => {
                            return h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'logo-buffer'
                                        },
                                        style: {
                                            marginRight: '8px',
                                            color:"#5cadff"
                                        }
                                    }),
                                    h('span', data.title)
                                ]
                            );
                        }
                    }
                    that.treeData = data;
                }})
            },
            getTableData(){
                this.tableLoading = true;
                var that=this;
                var url=this.CONFIG.progress_url+'/service-list/data/search-table';

                var params = this.searchs;
                params.current = this.page;
                params.pageSize = this.pageSize;
                params.orderOptions = this.orderOptions;

                console.log("====params=====",params);
                
                ajax.post({
                url:url,
                that:that,
                data:params,
                success:function(data){
                    //console.log("====getTableData=====",params.orderOptions);
                    var records = data.records;
                    records.forEach(item=>{
                        that.selectData.some(v=>{
                            if(v.serviceId == item.id){
                                item.ifCheck = true;
                                v.domain = item.domain
                                return true;
                            }
                        });
                        //console.log(item);
                    });

                    that.tableData = records;
                    console.log('records',records)
                    that.total = data.total;
                    that.tableLoading = false;
                    console.log('selectData',that.selectData)
                }})
            },
            refreshTableData(){
                this.utils.delay(() => {
                    this.searchs = {};
                    this.searchs.subjectField = "所有";
                    this.page = 1;
                    this.orderOptions = [];

                    this.getTableData();
                }, 500)
            },
            searchTables(){
                this.utils.delay(() => {
                    this.getTableData();
                }, 500)
            },
            selectMenu(data,row){
                console.log("=====33333=======",row);
                if(row != null && row != undefined){
                    this.utils.delay(() => {
                        this.page = 1;
                        this.searchs = {};
                        if(row.searchs != null && row.searchs != undefined && row.searchs.length>0){
                            row.searchs.forEach(item=>{
                                this.searchs[item.field] = item.value;
                            });
                        }
                        console.log("=====selectMenu=======",this.searchs);
                        this.getTableData();
                    }, 500)
                }
            },
            checkTable(data){
                console.log("=====checkTable=======",data,this.$parent);
                if(data.ifCheck){
                    this.getColumns(data,0);
                    if(this.ifProcess){
                        this.$parent.$parent.getTableName(data.tableName);
                    }
                }else{
                    // var temp = [];
                    // for(var i=0; i<this.temp_columns.length; i++){
                    //     if(this.temp_columns[i].tableId != data.id){
                    //         temp.push(this.temp_columns[i]);
                    //     }
                    // }
                    // this.temp_columns = temp;

                    for(var i=0; i<this.selectData.length; i++){
                        if(this.selectData[i].serviceId == data.id){
                            this.selectData.splice(i,1)
                        }
                    }
                    //console.log("=====selectData=======",this.temp_columns);
                }
            },
            selectTable(data,index){
                console.log("=======selectRow======",data,index);
                if(this.ifProcess){
                    this.$parent.$parent.getTableName(data.tableName);
                }
                this.tableData[index].ifCheck=true;
                this.getColumns(data,0);
            },
            sortTable(data){
                console.log("=======sortTable======",data);
                this.page = 1;
                if(data.order == 'normal'){
                    this.orderOptions = [];
                }else{
                    var arr = [];
                    var obj = {};
                    obj.orderField = data.key;
                    obj.orderType = data.order;
                    arr.push(obj);
                    this.orderOptions = arr;
                }
                this.getTableData();
            },
            changePage(page){
                this.page = page;
                //console.log("=======changePage======",this.page);
                this.getTableData();
            },
            changePageSize(pageSize){
                this.pageSize = pageSize;
                this.getTableData();
            },
            renderContent (h, { root, node, data }) {
                return h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-folder-open'
                            },
                            style: {
                                marginRight: '8px',
                                color:"#5cadff"
                            }
                        }),
                        h('span', data.title)
                    ]
                );
            },
            setCheck(data){
                var string = JSON.stringify(data);
                var temp = JSON.parse(string);

                var fields = [];
                this.selectData.some(item=>{
                    if(item.serviceId == this.id){
                        fields = item.fields;
                        return true;
                    }
                })

                temp.forEach(item=>{
                    fields.some(v=>{
                        if(v.fieldServiceId == item.id){
                            item._checked = true;
                            return true;
                        }
                    });
                });

                return temp;
            },
            getColumns(data,number){

                this.utils.delay(() => {
                    this.columnsLoading = true;
                    this.cPage = 1;
                    var json = JSON.stringify(this.selectData);
                    var arr = JSON.parse(json);
                    if(number == 0){
                        this.temp_select = arr;
                    }

                    this.temp_table = data;
                    this.columnName = "";
                    this.id = data.id;

                    var that=this;
                    var url=this.CONFIG.progress_url+'/service-list/data/field/' + this.id;

                    ajax.get({
                    url:url,
                    that:that,
                    success:function(data){
                        that.len = data.length
                        console.log('getColumns:',data.length)
                        console.log('number',number)
                        that.allColumns = data;
                        that.all_normal = data;

                        // that.columnsData = that.setCheck(data);

                        // var page_data = [];
                        // that.cTotal = data.length;
                        // var index = (that.cPage-1)*that.cPageSize;
                        // for(var i=index; i<(index+that.cPageSize); i++) {
                        //     if(i<data.length){
                        //         page_data.push(data[i]);
                        //     }
                        // }
                        // that.columnsData = that.setCheck(page_data);

                        that.pageColumns(data);
                        // that.showTable = false;
                        // that.columnsLoading = false;

                        console.log("=========",data);
                    }})
                }, 500)
            },
            findColumns(){
                this.cPage = 1;
                if(this.columnName=="" || this.columnName==null && this.columnName==undefined){

                    //this.columnsData = this.setCheck(this.allColumns);
                    this.pageColumns(this.allColumns);
                }else{

                    this.search_columns = this.all_normal.filter(item => item.fieldName.indexOf(this.columnName) > -1);
                    this.search_normal = this.all_normal.filter(item => item.fieldName.indexOf(this.columnName) > -1);
                    //this.columnsData = this.setCheck(data);
                    this.pageColumns(this.search_columns);
                }
                console.log("=222==findColumns======",this.search_normal);
            },
            pageColumns(data){
                var page_data = [];
                this.cTotal = data.length;
                var index = (this.cPage-1)*this.cPageSize;
                for(var i=index; i<(index+this.cPageSize); i++) {
                    if(i<data.length){
                        page_data.push(data[i]);
                    }
                }
                this.columnsData = this.setCheck(page_data);
                console.log("====pageColumns====",this.columnsData);
                this.showTable = false;
                this.columnsLoading = false;
            },
            changeCpage(page){
                console.log("==changeCpage=======",page);
                this.cPage = page;
                if(this.columnName=="" || this.columnName==null && this.columnName==undefined){
                    this.pageColumns(this.allColumns);
                }else{
                    this.pageColumns(this.search_columns);
                }
            },
            changeCpageSize(pageSize){
                this.cPageSize = pageSize;
                if(this.columnName=="" || this.columnName==null && this.columnName==undefined){
                    this.pageColumns(this.allColumns);
                }else{
                    this.pageColumns(this.search_columns);
                }
            },
            sortColumns(data){
                console.log("======before=====",this.search_normal);
                var sortBy = data.key;
                var order = data.order;

                var columns = [];
                if(this.columnName=="" || this.columnName==null && this.columnName==undefined){
                    var json = JSON.stringify(this.all_normal);
                    var arr = JSON.parse(json);
                    this.allColumns = arr;
                    columns = this.allColumns;
                }else{
                    console.log("----normal-----",this.search_normal);
                    var json = JSON.stringify(this.search_normal);
                    var arr = JSON.parse(json);
                    this.search_columns = arr;
                    columns = this.search_columns;
                }

                if(order == 'asc'){
                    columns.sort(function(x, y) {
                        return x[sortBy].localeCompare(y[sortBy])
                    });
                }else if(order == 'desc'){
                    columns.sort(function(x, y) {
                        return y[sortBy].localeCompare(x[sortBy])
                    });
                }

                this.cPage = 1;
                this.pageColumns(columns);
                console.log("======afier=====",columns);
            },
            selectColumns(selection,row){
                var flag = true;

                var a = row;
                a.isEncryption = 1;
                a.isRequired = 1;
                a.remark = "";
                a.fieldServiceId = row.id;

                this.selectData.some(item=>{
                    if(item.serviceId == this.temp_table.id){
                        item.fields.push(a);
                        item.len = this.len
                        flag = false;
                        return true;
                    }
                })

                if(flag){
                    var json = {};
                    json.len = this.len
                    json.fields = [];
                    json.fields.push(a);

                    json.service = this.temp_table;
                    json.cycleType = this.temp_table.cycleType;
                    json.purpose = "";
                    json.serviceId = this.temp_table.id;
                    json.tableName = this.temp_table.tableName;
                    json.domain = this.temp_table.domain;
                    json.subjectField = this.temp_table.subjectField;

                    this.selectData.push(json);
                }

                //this.temp_columns.push(row);
                console.log("=====selectColumns====",this.selectData);
            },
            cancelColumns(selection,row){
                // for(var i=0; i<this.temp_columns.length; i++){
                //     if(this.temp_columns[i].id == row.id){
                //         this.temp_columns.splice(i,1);
                //     }
                // }

                var index = -1;
                outer:
                for(var i=0; i<this.selectData.length; i++){
                    if(this.selectData[i].serviceId == row.tableId){
                        var index = i;
                        for(var j=0; j<this.selectData[i].fields.length; j++){
                            if(this.selectData[i].fields[j].fieldServiceId == row.id){
                                this.selectData[i].fields.splice(j,1);
                                break outer;
                            }
                        }
                    }
                }

                if(this.selectData[index].fields.length < 1){
                    this.selectData.splice(index,1)
                }
                this.selectData[index].len = this.len
                console.log("=====cancelColumns====",this.selectData,row);
            },
            selectAllColumns(data){
                // selection.forEach(item=>{
                //     var boolean = true;
                //     this.temp_columns.some(v=>{
                //         if(v.id == item.id){
                //             boolean = false;
                //             return true;
                //         }
                //     })
                //     if(boolean){
                //         this.temp_columns.push(item);
                //     }
                // })

                if(this.columnName=="" || this.columnName==null && this.columnName==undefined){
                    var json = JSON.stringify(this.all_normal);
                    var arr = JSON.parse(json);
                    var selection = arr;
                }else{
                    var json = JSON.stringify(this.search_normal);
                    var arr = JSON.parse(json);
                    var selection = arr;
                }

                selection.forEach(item=>{
                    item.isEncryption = 1;
                    item.isRequired = 1;
                    item.remark = "";
                    item.fieldServiceId = item.id;
                })
                console.log("======selection========",selection);
                var id = selection[0].tableId;
                var haveTable = false;
                var fields = [];
                var index = -1;
                for(var i=0; i<this.selectData.length; i++){
                    if(this.selectData[i].serviceId == id){
                        haveTable = true;
                        fields = this.selectData[i].fields;
                        index = i;
                        break;
                    }
                }

                if(haveTable){
                    selection.forEach(item=>{
                        var boolean = true;
                        fields.some(v=>{
                            if(v.fieldServiceId == item.id){
                                boolean = false;
                                return true;
                            }
                        })
                        if(boolean){
                            fields.push(item);
                        }
                    })

                    this.selectData[index].fields = fields;
                    this.selectData[index].len = this.len;
                }else{
                    var json = {};
                    json.len = this.len
                    json.fields = selection;

                    json.service = this.temp_table;
                    json.cycleType = this.temp_table.cycleType;
                    json.purpose = "";
                    json.serviceId = this.temp_table.id;
                    json.tableName = this.temp_table.tableName;

                    this.selectData.push(json);
                }


                // console.log("=====selectAllColumns====",this.selectData,this.columnsData);
                console.log("=====selectAllColumns====",this.search_columns,this.search_normal);
            },
            cancelAllColumns(selection){
               //console.log("=====selection====",selection);
                // this.columnsData.forEach(item=>{
                //     for(var i=0; i<this.temp_columns.length; i++){
                //         if(item.id == this.temp_columns[i].id){
                //             this.temp_columns.splice(i,1);
                //             break;
                //         }
                //     }
                // })
                console.log("=====columnsData=====");
                // console.log(this.columnsData,this.selectData);
                console.log(this.all_normal,this.search_normal);
                var id = this.columnsData[0].tableId;
                var index = -1;
                var fields = [];
                for(var i=0; i<this.selectData.length; i++){
                    if(this.selectData[i].serviceId == id){
                        index = i;
                        break;
                        //fields = this.selectData[i].fields;
                    }
                }

                var cancel;
                if(this.columnName=="" || this.columnName==null && this.columnName==undefined){
                    var json = JSON.stringify(this.all_normal);
                    var arr = JSON.parse(json);
                    cancel = arr;
                    console.log("0000000000",this.all_normal);
                }else{
                    var json = JSON.stringify(this.search_normal);
                    var arr = JSON.parse(json);
                    cancel = arr;
                }

                cancel.forEach(item=>{
                    console.log("----")
                    for(var i=0; i<this.selectData[index].fields.length; i++){
                        console.log(i)
                        if(item.id == this.selectData[index].fields[i].fieldServiceId){
                            this.selectData[index].fields.splice(i,1);
                            break;
                        }
                    }
                })

                if(this.selectData[index].fields.length < 1){
                    this.selectData.splice(index,1)
                }
                console.log("=====cancelAllColumns====",this.selectData,cancel);
            },
            saveColumns(){
                this.getTableData();
                return true;
            },
            ok_columns(){
                this.getTableData();
                this.showTable = true;
            },
            saveTable(){
                // var json = {};
                // json.selectData = this.selectData;
                // json.temp_columns = this.temp_columns;

                return this.selectData;
            },
            return01(){
                this.selectData = this.temp_select;
                console.log("-----return01------",this.temp_select,this.selectData);
                this.getTableData();
                this.showTable = true;
            },
            formatDate(date){
                //console.log("--------formatDate--------",this.utils.formatDate(new Date(date*1000), "yyyy-MM-dd"))
                return this.utils.formatDate(new Date(date*1000), "yyyy-MM-dd")
            },
            selectImport(name){
                console.log("=====name=====",name);
                this.menuName = name;
                this.selectFile();
            },
            selectFile() {
              const el = document.getElementById("file");
              el.click();
            },
        //     importFile() {
        //         //console.log("-------------begin------------");
        //         const el = document.getElementById("file");

        //         for(var i=0; i<el.files.length; i++){
        //             //console.log("-------------el.files------------",el.files);
        //             const file = el.files[i];
        //             var resultData = [];

        //             this.sendfile(file).then(async result => {
        //                 //console.log("========result=======",result);
        //                 for(var i=0; i<result.length; i++){
        //                     if(i == 0){
        //                         var data = await untils.importFromLocal(file,i);
        //                         resultData = untils.handleInfoByContent(data.body,this.table_columns,this);
        //                     }else{
        //                         for(var j=0; j<resultData.length; j++){
        //                             //console.log("========result=========",i,result[i].sheetName);
        //                             if(result[i].sheetName == resultData[j].tableName){
        //                                 var data = await untils.importFromLocal(file,i);
        //                                 var temp = untils.handleInfoByContent(data.body,this.columns,this);

        //                                 if(resultData[j] != undefined && resultData[j] != null){
        //                                     resultData[j].fields = temp;
        //                                 }
        //                                 break;
        //                             }
        //                         }
        //                     }
        //                 }


        //                 for(var k=0; k<resultData.length; k++){
        //                     //resultData[k].keepUnit = "天";
        //                     resultData[k].updateTime = Date.parse(new Date()) / 1000;
        //                 }
        //                 console.log("=====resultData=====",resultData);
        //                 this.importData(resultData);
        //             })
        //         }

        //         el.value = "";
        //     },
            async importFile() {
                const el = document.getElementById("file");

                console.log("------el.files--------",el.files.length);
                var allData = [];
                for(var i=0; i<el.files.length; i++){
                    console.log("i ----->",i)
                    const file = el.files[i];
                    var resultData = [];

                    var result = await untils.importSheets(file);
                    console.log("-------------result------------",result);

                    for(var k=0; k<result.length; k++){

                        if(k == 0){
                            resultData = untils.handleInfoByContent(result[k].body,this.table_columns,this);
                        }else{
                            for(var j=0; j<resultData.length; j++){
                                if(result[k].sheetName.trim() == resultData[j].tableName.trim()){
                                    var temp = untils.handleInfoByContent(result[k].body,this.columns,this);
                                    if(resultData[j] != undefined && resultData[j] != null){
                                        resultData[j].fields = temp;
                                    }
                                    break;
                                }
                            }
                        }
                    }

                    for(var k=0; k<resultData.length; k++){
                        resultData[k].updateTime = Date.parse(new Date()) / 1000;
                    }
                    allData = allData.concat(resultData);
                }
                console.log("=====allData=====",allData);
                this.importData(allData);
                el.value = "";
            },
            // sendfile(file){
            //     //console.log("=====sendfile=====");
            //     var wb = {};
            //     return new Promise(function (resolve, reject) {
            //       const reader = new FileReader()
            //       reader.onload = function (e) {
            //         const data = e.target.result
            //         wb = XLSX.read(data, {
            //           type: 'binary'
            //         })
            //         const result = []
            //         wb.SheetNames.forEach((sheetName) => {
            //           result.push({
            //             sheetName: sheetName,
            //             //sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
            //           })
            //         })
            //         resolve(result)
            //       }
            //       // reader.readAsBinaryString(file.raw)
            //       reader.readAsBinaryString(file) // 传统input方法
            //     })
            // },
            importData(data){
                var that=this;

                if(this.menuName == "0"){
                    var url=this.CONFIG.progress_url+'/service-list/data/append';
                }else{
                    var url=this.CONFIG.progress_url+'/service-list/data/reset';
                }
                console.log("-------importData-------",data);
                ajax.post({
                    url:url,
                    that:that,
                    data:data,
                    success:function(data){
                        console.log("+===========++++++++++",data);
                        that.getMenu();
                        that.getTableData()
                    }
                })
            }
        },
        props:{
            value: {
                dafault: false
            },
            resultData:{
                default:[]
            },
            // result_temp:{
            //     default:[]
            // },
            ifProcess:{
                default: true
            }
        },
        watch:{
            showTable(val){
                //console.log("4444444444444",val);
            },
            resultData(val){
                this.selectData = val;
                console.log("======val==========",this.selectData);
            },
            // result_temp(val){
            //     this.result_temp = val;
            //     console.log("====this.result_temp======",this.result_temp);
            // },
            ifProcess(val){
                console.log("======ifProcess========",val);
                this.ifProcess = val;
            }
        },
        computed: {
          showTable: {
            get: function() {
                console.log("22222222");
                return this.value;
            },
            set: function(value) {
                console.log("33333333",value);
                this.$emit('input', value);
            }
          },

          myTableColumns(){
            if(this.ifProcess){
                this.table_columns.unshift(
                    {
                        title: ' ',
                        slot:"selection",
                        width: 60,
                        align: 'center',
                        //fixed: 'left'
                    },
                );
            }
            return this.table_columns;
          },

          myColumns(){
            console.log("====3333==ifProcess========",this.ifProcess);
            if(this.ifProcess){
                this.columns.unshift(
                        {
                            type: 'selection',
                            width: 60,
                            align: 'center',
                        },
                );
            }
            return this.columns;
          }
        }
    }
</script>
